<template>
  <div class="x-data-coupon-list">
    <x-data-table
      ref="tableElRef"
      v-model:immediate="immediate"
      :params="dataTableParams"
      :columns="tableColumns"
      :toolbar="false"
    />
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, h, reactive, toRefs, VNode, watch } from 'vue'
  import { XDataTable } from '@/components'
  import { NSpace, NText } from 'naive-ui'

  export default defineComponent({
    name: 'XDataCouponList',
    components: {
      XDataTable
    },
    props: {
      // ids串
      ids: {
        type: Array,
        default: () => null
      },
      // list数据
      list: {
        type: Array,
        default: () => null
      },
      // api地址
      api: {
        type: String,
        default: 'marketing/couponList'
      },
      // 接口请求额外参数
      formData: {
        type: Object,
        default: () => {}
      },
      // 需要展示的列
      columns: {
        type: Array,
        default: () => [
          'couponName',
          'suitableType',
          'creatorName',
          'editorName',
          'balanceCoupons',
          'availableStartedAt'
        ]
      },
      // 前缀列
      prefix: {
        type: Array,
        default: () => []
      },
      // 后缀列
      suffix: {
        type: Array,
        default: () => []
      }
    },
    setup($props) {
      const $state: any = reactive({
        ...toRefs($props),
        immediate: true,
        dataTableParams: computed(() => {
          const actions = $props.api
          const params = {}
          if ($state.ids) {
            Object.assign(params, {
              couponIdList: $state.ids
            })
          }
          Object.assign(params, $state.formData || {})
          return {
            actions,
            data: params
          }
        }),
        tableColumns: computed(() => {
          const defaultColumns = [
            {
              title: '优惠劵信息',
              key: 'couponName',
              render(row: { id: number; couponName: string }): VNode {
                return h(NSpace, { size: 2, vertical: true }, () => [
                  h(NText, {}, () => `券名称：${row.couponName}`),
                  h(NText, {}, () => `券ID：${row.id}`)
                ])
              }
            },
            {
              title: '可用商品',
              key: 'suitableType',
              render(row: { suitableType: number }): VNode | string {
                if (row.suitableType === 3) {
                  return '全部商品'
                } else {
                  return '部分商品'
                }
              }
            },
            {
              key: 'creatorName',
              title: '创建账号',
              render(row: { creatorName: string; creatorMobile: string }): VNode {
                return h(NSpace, { vertical: true, size: 0 }, () => [row.creatorName, row.creatorMobile])
              }
            },
            {
              key: 'editorName',
              title: '最后修改人',
              render(row: { editorName: string; editorMobile: string }): VNode {
                return h(NSpace, { vertical: true, size: 0 }, () => [row.editorName, row.editorMobile])
              }
            },
            {
              key: 'balanceCoupons',
              title: '剩余/总数',
              render(row: { balanceCoupons: number; maxCoupons: number }): string {
                return `${row.balanceCoupons}/${row.maxCoupons}`
              }
            },
            {
              key: 'availableStartedAt',
              title: '有效期',
              width: 180,
              render(row: {
                availableStartedAt: string
                availableEndedAt: string
                validityType: number
                validityDays: number
                waitDays: number
              }): string {
                let validDateStr = `${row.availableStartedAt} 至 ${row.availableEndedAt}`
                if (row.validityType === 2) {
                  validDateStr = `领取后${row.validityDays}天内有效`
                } else if (row.validityType === 3) {
                  validDateStr = `领券后第${row.waitDays}日起${row.validityDays}天内有效`
                }
                return validDateStr
              }
            }
          ]
          const columns = []
          $props.columns.forEach((name: string) => {
            const find = defaultColumns.find((item) => item.key === name)
            if (find) {
              columns.push(find)
            }
          })
          if ($props.prefix?.length) {
            const prefix = $props.prefix || []
            columns.unshift(...prefix)
          }
          if ($props.suffix?.length) {
            const suffix = $props.suffix || []
            columns.push(...suffix)
          }
          return columns
        })
      })

      // watch
      watch(
        () => $state.ids,
        () => {
          $state.immediate = true
        },
        {
          deep: true
        }
      )

      return {
        ...toRefs($state)
      }
    }
  })
</script>

<style></style>
